<template>
    <div class="sea-page">
        <sea-grid col="2" gap="page">

            <div class="flex-box">
                <div class="flex-header">
                    <strong>信息卡</strong>
                    <a class="pull-right"> <i class="fa fa-fw fa-refresh"></i></a>
                </div>
                <div class="flex-body">
                    <div style="border-bottom: 1px solid lightgray; padding: 6px" class="box-hover">
                        <a><i class="fa fa-file-o"></i> 【文件】 2022年营销活动</a>
                        <span class="block align-right"><i class="fa fa-clock-o"></i> 2018-01-02</span>
                    </div>
                    <div style="border-bottom: 1px solid lightgray; padding: 6px" class="box-hover">
                        <a><span>这是一则消息</span></a>
                        <span class="block align-right"><i class="fa fa-clock-o"></i> 2018-01-02</span>
                    </div>
                </div>
            </div>


            <div class="flex-box">
                <div class="flex-header">
                    <strong>信息卡</strong>
                    <sea-small-pagination class="pull-right" total="100"></sea-small-pagination>
                    <div class="clearfix"></div>
                </div>
                <div class="flex-body">
                    <div style="border-bottom: 1px solid lightgray; padding: 6px" class="box-hover">
                        <a><i class="fa fa-file-o"></i> 【文件】 2022年营销活动</a>
                        <span class="block align-right"><i class="fa fa-clock-o"></i> 2018-01-02</span>
                    </div>
                    <div style="border-bottom: 1px solid lightgray; padding: 6px" class="box-hover">
                        <a><span>这是一则消息</span></a>
                        <p class="no-margin align-right"><i class="fa fa-clock-o"></i> 2018-01-02</p>
                    </div>
                </div>
            </div>


            <div class="flex-box">
                <div class="flex-header">
                    <strong>信息卡</strong>
                    <a class="pull-right"> <i class="fa fa-fw fa-refresh"></i></a>
                </div>
                <div class="flex-body">
                    <div style="border-bottom: 1px solid lightgray; padding: 6px" class="box-hover">
                        <a><i class="fa fa-file-o"></i> 【文件】 2022年营销活动</a>
                        <span class="block align-right"><i class="fa fa-clock-o"></i> 2018-01-02</span>
                    </div>
                    <div style="border-bottom: 1px solid lightgray; padding: 6px" class="box-hover">
                        <a><span>这是一则消息</span></a>
                        <span class="block align-right"><i class="fa fa-clock-o"></i> 2018-01-02</span>
                    </div>
                </div>
                <div class="flex-footer">
                    <p class="align-right">
                        当前有3个消息，<a>查看更多 > </a>
                    </p>
                </div>
            </div>


            <div class="flex-box">
                <div class="flex-header">
                    <h5>任务</h5>
                </div>
                <div class="flex-body">
                    <div class="margin-bottom">
                        <h5 style="display: inline-block;margin-right: 8px;">推塔任务X</h5>
                        <el-tag><i class="fa fa-clock-o"></i> 超时：3天</el-tag>
                    </div>
                    <div class="flex-row-gap" style="gap: 10px;">
                        <article class="flex-body">
                            <span class="block">任务指标：7 分钟拿下一塔</span>
                            <span class="block">目标: 1</span>
                            <span class="block">参与人数: 32</span>
                            <span class="block">当前阶段: 领先补刀20个</span>
                        </article>
                        <div class="flex-right" style="margin-right: 24px;">
                            <el-progress :percentage="50" type="circle" :width="60" :stroke-width="3"></el-progress>
                            <p style="font-size: xx-small; margin: 0;">任务完成率</p>
                        </div>
                    </div>
                </div>
                <div class="flex-footer border-top">
                    <div class="align-right">
                        当前有3个消息，
                        <a>查看更多 > </a>
                    </div>
                </div>
            </div>


            <div class="flex-box">
                <div class="flex-header">
                    <h5>文章</h5>
                    <a class="pull-right"> <i class="fa fa-fw fa-refresh"></i>刷新 </a>
                </div>

                <div class="flex-body no-padding">
                    <div class="margin-large sea-gap-group-v">
                        <div class="border-bottom">
                            <el-link><h5>标题</h5></el-link>
                        </div>
                        <article>
                            <p>摘要： Java 调用 kettle，难的不是怎么调用，而是解决 maven 依赖冲突问题，直接将 kettle 依赖，
                                添加到我们的 maven 工程，可能会导致代码大范围报错；解决方案也很简单，就是直接从 spoon 的
                                lib 目录下，
                                复制我们所需的 jar 包，按需导入我们的工程。 主要用到的jar包。 <a>[阅读全文]</a></p>
                        </article>
                        <p><i class="fa fa-clock-o"></i>2017-03-04 11:12:13 点赞(32)<a> 编辑</a></p>
                    </div>

                    <div class="margin-large sea-gap-group-v">
                        <div class="border-bottom">
                            <el-link><h5>标题</h5></el-link>
                        </div>
                        <article>
                            <p>摘要： Java 调用 kettle，难的不是怎么调用，而是解决 maven 依赖冲突问题，直接将 kettle 依赖，
                                添加到我们的 maven 工程，可能会导致代码大范围报错；解决方案也很简单，就是直接从 spoon 的
                                lib 目录下，
                                复制我们所需的 jar 包，按需导入我们的工程。 主要用到的jar包。 <a>[阅读全文]</a></p>
                        </article>
                        <p style="margin-top: 6px"><i class="fa fa-clock-o"></i>2017-03-04 11:12:13 点赞(32)<a> 编辑</a>
                        </p>
                    </div>
                </div>
            </div>
        </sea-grid>
    </div>
</template>

<script>
export default {
    name: "card1"
}
</script>

<style scoped>

</style>